<template>
  <div class="songList w-full h-full overflow-auto pt-10 relative">
    <div class="songList_head mx-auto w-auto flex justify-between">
      <i
        class="close el-icon-close absolute top-10 right-1/4 flex justify-center items-center w-8 h-8 cursor-pointer rounded-lg"
        @click="back"
      ></i>
      <div class="jiaojuan w-full flex justify-center mx-3">
        <img
          :src="songlist.al.picUrl"
          width="230px"
          height="230px"
          class="rounded-full"
          alt=""
        />
      </div>
      <div class="songdata">
        <div class="flex items-center">
          <h3 class="text-2xl truncate w-64">{{ songlist.name }}</h3>
          <span class="tone_quality ml-3 text-xs">标准音质</span>
        </div>
        <div class="text-xs">
          <el-row :gutter="20">
            <el-col :span="6">
              <span class="truncate block">
                专辑:
                <router-link to="" class="ml-1 text-blue-700">{{
                  songlist.al.name
                }}</router-link>
              </span>
            </el-col>
            <el-col :span="6">
              <span class="truncate block">
                歌手:
                <router-link to="" class="ml-1 text-blue-700">{{
                  songlist.ar[0].name
                }}</router-link>
              </span>
            </el-col>
            <el-col :span="6">
              <span class="truncate block">
                来源:
                <router-link to="" class="ml-1 text-blue-700">{{
                  songlist.al.name
                }}</router-link>
              </span>
            </el-col>
          </el-row>
        </div>
        <div class="lyrica">
          <ul class="lyric" v-show="isShowMusicList" ref="lyric">
            <li
              :class="{ each: true, choose: index == lyricIndex }"
              v-for="(item, key, index) in currentMUsicLyric"
              :key="key"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="comment flex pt-32">
      <discuss class="discuss"></discuss>
      <div>
        <div>
          <h3>包含这首歌的歌单</h3>
          <router-link
            :to="{
              name: 'particulars',
              params: { id: item.id, name: 'playlist' },
            }"
            v-for="(item, index) in Similar"
            :key="index"
            class="include my-3 flex text-xs rounded-lg"
          >
            <img
              :src="item.coverImgUrl"
              class="rounded-lg mr-2"
              width="52px"
              height="52px"
            />
            <div class="flex flex-col justify-around">
              <span class="truncate">{{ item.name }}</span>
              <span>播放: {{ parseInt(item.playCount / 10000) }}万</span>
            </div>
          </router-link>
        </div>
        <div>
          <h3>相似歌曲</h3>
          <router-link
            to=""
            v-for="(item, index) in similarity"
            :key="index"
            class="include my-3 flex text-xs rounded-lg"
          >
            <img
              :src="item.album.picUrl"
              class="rounded-lg mr-2"
              width="52px"
              height="52px"
            />
            <div class="flex flex-col justify-around">
              <span class="truncate">{{ item.name }}</span>
              <span> {{ item.album.artists[0].name }}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import discuss from "@/components/discuss.vue";

export default {
  name: "songList",
  components: {
    discuss,
  },
  data() {
    return {
      songlist: this.$store.state.nowsong,
      currentMUsicLyric: [],
      isShowMusicList: true,
      lyricIndex: 0,
      Similar: [],
      similarity: [],
      // value: this.$store.state.currentTime,
    };
  },
  computed: {
    value() {
      return this.$store.state.currentTime;
    },
    list() {
      return this.$store.state.nowsong;
    },
  },
  watch: {
    list() {
      // this.getlyric();
      // this.getSimilarPlaylist();
      // this.getSimilarsong();
      this.songlist = this.$store.state.nowsong;
    },
    value() {
      let i = 0;
      // 循环歌词对象
      console.log(this.currentMUsicLyric);
      for (let key in this.currentMUsicLyric) {
        // key表示歌词对象中的时间，如果key等于歌曲进度value，改变当前歌词进度		lyricIndex
        // console.log(this.currentMUsicLyric);
        if (+key == this.value) {
          console.log(key);
          this.lyricIndex = i;
          // 当歌词进度大于5，即播放到了第5句歌词，开始滚动
          if (i > 5) {
            this.$refs.lyric.scrollTop = 30 * (i - 5);
          }
        }
        i++;
      }
    },
  },
  created() {
    this.getlyric();
    this.getSimilarPlaylist();
    this.getSimilarsong();
  },
  methods: {
    getlyric() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/lyric",
        params: {
          id: this.songlist.id,
        },
      })
        .then((result) => {
          let lyricArr = result.data.lrc.lyric.split("[").slice(1); // 先以[进行分割
          let lrcObj = {};
          lyricArr.forEach((item) => {
            let arr = item.split("]"); // 再分割右括号
            // 时间换算成秒
            let m = parseInt(arr[0].split(":")[0]);
            let s = parseInt(arr[0].split(":")[1]);
            arr[0] = m * 60 + s;
            if (arr[1] != "\n") {
              // 去除歌词中的换行符
              lrcObj[arr[0]] = arr[1];
            }
          });
          this.currentMUsicLyric = lrcObj;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSimilarPlaylist() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/simi/playlist",
        params: {
          id: this.songlist.id,
        },
      })
        .then((result) => {
          this.Similar = result.data.playlists;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSimilarsong() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/simi/song",
        params: {
          id: this.songlist.id,
        },
      })
        .then((result) => {
          this.similarity = result.data.songs;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.songList {
  .close {
    border: 1px solid #e6e6e6;
    z-index: 9999;
  }
  height: 82.5vh;
  width: 100vw;
  .songList_head {
    width: 950px;
    margin: 0 auto;

    .songdata {
      width: 520px;
      padding-right: 20px;
      height: 340px;
      position: relative;
      .lyric {
        overflow-y: auto;
        width: 100%;
        height: 333px;
        position: absolute;
        top: 50;
        right: 80px;
        // background-color: #333;
        // 滚动条
        color: #999;
        font-size: 10px;
        font-weight: normal;
        padding: 5px 10px;
        // border: 1px solid #000;
        border-left: none;
        transition: 0.3s;
        .each {
          height: 30px;
          // border: 1px solid #000;
          line-height: 30px;
          text-align: center;
        }
        .choose {
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .tone_quality {
      display: block;
      border: 1px solid #f06767;
      color: #f06767;
      font-size: 12px;
      position: relative;
    }
    .tone_quality::after {
      content: "";
      position: absolute;
      top: -5px;
      left: 20px;
      width: 10px;
      height: 5px;
      transform: rotate(180deg);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      background: #f06767;
    }
  }
  .discuss {
    width: 550px;
    margin: 0 auto;
  }
  .jiaojuan {
    width: 325px;
    height: 325px;
    border-radius: 50%;
    background: url(../assets/inedx/coverall.png) -253px -1006px no-repeat;
    background-size: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .comment {
    width: 950px;
    margin: 0 auto;
    a {
      // display: block;
      padding: 5px;
      &:hover {
        background: #f1f2f3;
      }
    }
    .include {
      width: 250px;
      span {
        width: 180px;
        display: block;
      }
    }
  }
}
</style>